import { getFollowersApi, type Result } from "@/api/followers"
import { List, Image, NavBar } from "antd-mobile"
import { useEffect, useState } from "react"

const Message = () => {
  const [pages, setPages] = useState({
    page: 1,
    per_page: 20
  })
  const [list, setList] = useState<Result>([])

  const getFollowers = async () => {
    try {
      const { data } = await getFollowersApi(pages)
      console.log('resFollowers', data)
      setList(data.data.results)
    } catch (error) {
      console.log('followers', error)
    }
  }
  useEffect(() => {
    getFollowers()
  }, [])

  const goToMessageDetail = () => {

  }

  return (
    <div>
      <NavBar back={null}>消息页</NavBar>
      <List>
        {
          list.map((item: Result) => (
              <List.Item
                onClick={() => goToMessageDetail(item.id)}
                key={item.id}
                prefix={
                  <Image
                    src={item.photo}
                    style={{ borderRadius: 20 }}
                    fit="cover"
                    width={40}
                    height={40}
                  ></Image>
                }
              >
                {item.name}
              </List.Item>
            )
          )
        }
      </List>
    </div>
  )
}
export default Message